<template>
  <basic-container>
    <el-tabs @tab-click="aaa">
      <el-tab-pane label="基本信息"
                   name="0">
        <el-row class="margin-bottom-zero">
          <el-col :span="13">
            <el-row>
              <el-col :span="6">设备分类：</el-col>
              <el-col :span="6">{{ comEqType(equipmentInfo.equipmentTypeId) }}</el-col>
              <el-col :span="6">购买日期：</el-col>
              <el-col :span="6">{{equipmentInfo.purchasingDate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">设备编码：</el-col>
              <el-col :span="6">{{equipmentInfo.coded}}</el-col>
              <el-col :span="6">购买价格：</el-col>
              <el-col :span="6">{{equipmentInfo.price}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">设备名称：</el-col>
              <el-col :span="6">{{equipmentInfo.name}}</el-col>
              <el-col :span="6">供应商：</el-col>
              <el-col :span="6">{{equipmentInfo.supplier}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">型号：</el-col>
              <el-col :span="6">{{equipmentInfo.marking}}</el-col>
              <el-col :span="6">联系方式：</el-col>
              <el-col :span="6">{{equipmentInfo.phoneNum}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">品牌：</el-col>
              <el-col :span="6">{{equipmentInfo.brand}}</el-col>
              <el-col :span="6"
                      v-if="equipmentInfo.laboratory">安装实验室：</el-col>
              <el-col :span="6"
                      v-if="equipmentInfo.laboratory">{{equipmentInfo.laboratory.name}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="9"
                  :offset="1">
            <img :src="HTTP + equipmentInfo.pictureUrl"
                 class="imgClass" />
          </el-col>
        </el-row>
        <div class="el-divider"></div>
        <el-row>
          <el-col :span="13">
            <el-row>
              <el-col :span="6">启用状态：</el-col>
              <el-col :span="6">{{equipmentInfo.isRun == 0? '已启用':'已停用'}}</el-col>
              <el-col :span="6"
                      v-if="equipmentInfo.isRun == 1">设备状态：</el-col>
              <el-col :span="6">{{equipmentState(equipmentInfo)}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">最近启用/停用人：</el-col>
              <el-col :span="6">{{equipmentInfo.updateName}}</el-col>
              <el-col :span="6">首次启用时间：</el-col>
              <el-col :span="6">{{equipmentInfo.alterTime}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">最近启用/停用时间：</el-col>
              <el-col :span="6">{{equipmentInfo.lastStopTime}}</el-col>
              <el-col :span="6">最近维修日期：</el-col>
              <el-col :span="6">{{equipmentInfo.lastRepairDate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">保养周期：</el-col>
              <el-col :span="6">{{equipmentInfo.maintainCycle}}</el-col>
              <el-col :span="6">最近保养日期：</el-col>
              <el-col :span="6">{{equipmentInfo.lastMaintainDate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">校准周期：</el-col>
              <el-col :span="6">{{equipmentInfo.correctCycle}}</el-col>
              <el-col :span="6">最近校准日期：</el-col>
              <el-col :span="6">{{equipmentInfo.lastCorrectDate}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="11"
                  class="shebieMsg">
            <el-row>
              <el-col :span="4">传输方式：</el-col>
              <el-col :span="4">{{equipmentInfo.mode === 0 ? '多通道' : '单通道'}}</el-col>
              <el-col :span="4">接口类型：</el-col>
              <el-col :span="4">
                <template v-if="equipmentInfo.interfaceType == 0">TPC</template>
                <template v-else-if="equipmentInfo.interfaceType == 1">串口</template>
                <template v-else-if="equipmentInfo.interfaceType == 2">USB</template>
                <template v-else-if="equipmentInfo.interfaceType == 3">其他</template>
                <template v-else></template>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">通讯口：</el-col>
              <el-col :span="4"></el-col>
              <el-col :span="4">数据位：</el-col>
              <el-col :span="4"></el-col>
              <el-col :span="4">停止位：</el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row>
              <el-col :span="4">波特率：</el-col>
              <el-col :span="4"></el-col>
              <el-col :span="4">校验位：</el-col>
              <el-col :span="4"></el-col>
              <el-col :span="4">流控位：</el-col>
              <el-col :span="4"></el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="参与项目"
                   name="1">
        <avue-crud :option="pojoOption"
                   :data="gridData"
                   :table-loading="pojoLoading"
                   ref="crud" @size-change='sizeChanges'
                 @current-change="currentPages">
          <template slot-scope="scope" slot="status">{{ scope.row.status == 0 ? '待启动' : scope.row.status == 1 ? '已启动' : scope.row.status == 2 ? '已结束' : '' }}</template>
          <template slot-scope="scope" slot="startTime">{{ scope.row.startTime }}至{{ scope.row.endTime }}</template>
          <template slot-scope="scope"
                    slot="menu">
            <el-button type="primary"
                       size="small"
                       plain
                       @click.stop="pojoMenuBtn(scope.row,scope.index)">查看</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>

      <el-tab-pane label="维保记录"
                   name="2">
        <!-- <el-form ref="stateModeForm"
                 :model="aintenanceForm"
                 size="mini"
                 :inline="true">
          <el-form-item label="维保结果"
                        prop="stop_cause">
            <el-select v-model="aintenanceForm.state"
                       placeholder="请选择">
              <el-option label="默认"
                         value="0"></el-option>
              <el-option label="默认1"
                         value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维保类型"
                        prop="stop_cause">
            <el-select v-model="aintenanceForm.state"
                       placeholder="请选择">
              <el-option label="默认"
                         value="0"></el-option>
              <el-option label="默认1"
                         value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=""
                        prop="stop_cause">
            <el-input v-model="aintenanceForm.state"
                      placeholder="请输入维保单位"></el-input>
          </el-form-item>
          <el-form-item label=""
                        prop="stop_cause">
            <el-button type="primary"
                       size="small"
                       plain
                       @click.stop="pojoMenuBtn(scope.row,scope.index)">搜索</el-button>
            <el-button size="small"
                       plain
                       @click.stop="pojoMenuBtn(scope.row,scope.index)">重置</el-button>
          </el-form-item>
        </el-form> -->
        <avue-crud :option="maintenanceOption"
                   :data="maintenanceList"
                   :table-loading="maintenanceLoading"
                   ref="crud">
          <template slot-scope="scope" slot="maintenanceType">{{ scope.row.application.maintenanceType == 0 ? '保养': scope.row.application.maintenanceType == 1 ? '校准' : scope.row.application.maintenanceType == 2 ? '维修':'' }}</template>
          <template slot-scope="scope" slot="maintenanceResults">{{ scope.row.maintenanceResults == 0 ? '未维保': scope.row.maintenanceResults == 1 ? '已维保': '' }}</template>
          <template slot-scope="scope" slot="startTime">{{ scope.row.startTime }}至{{ scope.row.endTime }}</template>
          <template slot-scope="scope"
                    slot="menu">
            <el-button type="primary"
                       size="small"
                       plain
                       @click.stop="shenqing(scope.row,scope.index)">申请单</el-button>
            <!-- <el-button type="primary"
                       size="small"
                       plain
                       @click.stop="weibao(scope.row,scope.index)">维保单</el-button> -->
          </template>
        </avue-crud>
      </el-tab-pane>

      <el-tab-pane label="使用记录"
                   name="3">
        <avue-crud :option="useOption"
                   :data="gridData"
                   :table-loading="useLoading"
                  
                   ref="crud"></avue-crud>
      </el-tab-pane>

      <el-tab-pane label="借还记录"
                   name="4">
        <avue-crud :option="bandrOption"
                   :data="borrowingList"
                   :table-loading="bandrLoading"
                   ref="crud">
          <template slot-scope="scope" slot="borrowingStatus">
            <template v-if="scope.row.borrowingStatus == 0">待出库</template>
            <template v-else-if="scope.row.borrowingStatus == 1">待归库</template>
            <template v-else-if="scope.row.borrowingStatus == 2">已归库</template>
            <template v-else-if="scope.row.borrowingStatus == 3">已中止</template>
            <template v-else></template>
          </template>
          <template slot-scope="scope" slot="warehouse">{{ scope.row.warehouse.name }}</template>
          <template slot-scope="scope"
                    slot="departmentName">{{scope.row.departmentName}}<span>-</span>{{scope.row.userName}}</template>
          <template slot-scope="scope" slot="borrowingUserName">{{ scope.row.borrowingTime }}/{{ scope.row.borrowingUserName }}</template>
          <template slot-scope="scope" slot="returnUserName">{{ scope.row.returnTime }}/{{ scope.row.returnUserName }}</template>
          <template slot-scope="scope"
                    slot="menu">
            <el-button type="primary"
                       size="small"
                       plain
                       @click.stop="shenqing(scope.row,scope.index)">申请单</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>

      <el-tab-pane label="报废信息"
                   name="5">
        <el-row class="margin-bottom-zero">
          <el-col :span="24">
            <el-row>
              <el-col :span="2">报废类型:</el-col>
              <el-col :span="3"><template v-if="scrap">{{ formatterStatus(scrap.scrapType) }}</template></el-col>
              <el-col :span="2">申请部门/人:</el-col>
              <el-col :span="3"><template v-if="scrap">{{ scrap.departmentName }}-{{ scrap.userName }}</template></el-col>
              <el-col :span="2">申请时间:</el-col>
              <el-col :span="3"><template v-if="scrap">{{ scrap.applicationTime }}</template></el-col>
            </el-row>
            <el-row>
              <el-col :span="2">报废说明:</el-col>
              <el-col :span="15">
                <span v-if="scrap">{{ scrap.scrapApplication.remarks }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <div class="el-divider"></div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <template v-if="scrap">
        <el-row class="margin-bottom-zero" v-for="(item,index) in scrap.scrapApplication.scrapProcessList" :key="index">
          <el-col :span="24">
            <el-row>
              <el-col :span="2">审核人:</el-col>
              <el-col :span="3">{{ item.dealerName }}</el-col>
              <el-col :span="2">申请时间:</el-col>
              <el-col :span="3">{{ item.dealDate }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">备注:</el-col>
              <el-col :span="15">
                <span> {{ item.dealNote }} </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <div class="el-divider"></div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        </template>

        <el-row class="margin-bottom-zero">
          <el-col :span="24">
            <el-row>
              <el-col :span="2">处理人:</el-col>
              <el-col :span="3" v-if="scrap">{{ scrap.processor }}</el-col>
              <el-col :span="2">处理时间:</el-col>
              <el-col :span="3" v-if="scrap">{{ scrap.processDate }}</el-col>
              <el-col :span="3">出售价格（价格）:</el-col>
              <el-col :span="3" v-if="scrap">{{ scrap.price }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">备注:</el-col>
              <el-col :span="15">
                <span v-if="scrap">{{ scrap.remarks }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane label="设备数据"
                   name="6">
        <avue-crud :option="deviceDataOption"
                   :data="deviceDataList"
                   :table-loading="useLoading"
                   :page="deviceOptionPage"
                   ref="crud"  @size-change='sizeChanges'
                 @current-change="currentPages">
                 <template slot-scope="scope"
                    slot="menu">
                       <a class="btn" :href="action + scope.row.url" target="_blank" download="filename">下载</a>
          </template>
          </avue-crud>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="申请单" :visible.sync="examineMode" width="60%" @close="resetForm('form')">
      <div id="printTest">
        <el-row :gutter="10">
          <el-col :span="4">审批单号：</el-col>
          <el-col :span="8">{{ checkInfo.approvalNumber }}</el-col>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :gutter="10">
          <el-col :span="4">设备类别：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment">{{ comEqType( checkInfo.equipment.equipmentTypeId ) }}</template></el-col>
          <el-col :span="4">设备编码：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment">{{ checkInfo.equipment.coded }}</template></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">设备名称：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment">{{ checkInfo.equipment.name }}</template></el-col>
          <el-col :span="4">型号：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment">{{ checkInfo.equipment.marking }}</template></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">品牌：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment">{{ checkInfo.equipment.brand }}</template></el-col>
          <el-col :span="4">存放位置：</el-col>
          <el-col :span="8">{{ checkInfo.locationName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">购买价格：</el-col>
          <el-col :span="8">{{ checkInfo.buyPrice }}</el-col>
          <el-col :span="4">首次启用时间：</el-col>
          <el-col :span="8">{{ checkInfo.firstOpenTime }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保次数：</el-col>
          <el-col :span="20">{{ checkInfo.historyCount || 0 }}次（保养 {{ checkInfo.maintainCount || 0 }}次，效准 {{ checkInfo.correctCount || 0 }}次，维修 {{ checkInfo.maintenanceCount || 0 }}次）</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保总费用：</el-col>
          <el-col :span="20">{{ checkInfo.historyMoney || 0 }}元（保养 {{ checkInfo.maintainMoney || 0 }}元 ，效准{{ checkInfo.correctMoney || 0 }}元 ，维修 {{ checkInfo.maintenanceMoney || 0 }}元） </el-col>
        </el-row>

        <div class="lineDiv" v-if="examineModeType == 2"></div>
        <el-row :gutter="10">
          <el-col :span="3">报废类型：</el-col>
          <el-col :span="5">
            <template v-if="checkInfo.scrapType == 0">出售</template>
            <template v-else-if="checkInfo.scrapType == 1">处理</template>
            <template v-else-if="checkInfo.scrapType == 2">其他</template>
          </el-col>
          <template v-if="examineModeType == 2">
            <el-col :span="3">申请部门/人：</el-col>
            <el-col :span="5">{{ checkInfo.departmentName }} - {{ checkInfo.userName }}</el-col>
            <el-col :span="3">申请时间：</el-col>
            <el-col :span="5">{{ checkInfo.applicationTime }}</el-col>
          </template>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType == 2">
          <el-col :span="3">报废说明：</el-col>
          <el-col :span="21">{{ checkInfo.remarks }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapState } from 'vuex'
import { pojoOption, maintenanceOption, useOption, bandrOption, jsonToArray,deviceDataOption } from "@/const-personal/ledger/equipment.js"
import { findLedger, getDevTypeList, findById,getDevice  } from '@/api/ledger/equipmentLedger.js'
import config from '@/const/website.js'
import { setStore } from '@/util/store'

export default {
  name: "equipment",
  data () {
    return {
      action: config.axiosUrl,
      HTTP: config.axiosUrl,
      equipmentInfo: {}, // 设备 基本信息
      equipmentDataInfo: {}, // 仪表盘 基本信息
      gridData: [], // 参与项目表
      maintenanceList: [], // 维保表
      borrowingList: [], // 借还表
      deviceDataList:[],//设备数据表
      scrap: { scrapApplication: {}}, // 报废
      //维保纪录form
      aintenanceForm: {},

      //项目表
      pojoOption: pojoOption,
      deviceDataOption:deviceDataOption,
      maintenanceOption: maintenanceOption,
      useOption: useOption,
      bandrOption: bandrOption,
      //等待表
      pojoLoading: false,
      maintenanceLoading: false,
      useLoading: false,
      bandrLoading: false,
      //分页
      pojoOptionPage: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5,10,20]
      },
      //设备数据分页
      deviceOptionPage: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5,10,20]
      },
      pojoOptionDate: [
        {
          idno: 2000101010,
          date: '2016-05-02',
          name: '测试1',
          sbno: '测试1',
          sbname: '测试1',
          sbxh: '测试1',
        }
      ],
      treeData: [], // 设备分类 tree
      scrapTypeList: [ // 报废类型
        { value: 0, label: '出售' },
        { value: 1, label: '处理' },
        { value: 2, label: '其他' },
      ],
      examineMode:false, //申请单
      examineModeType: 1,
      checkInfo: {
        id: '',
        equipment: {},
      }, // 申请单详情
    }
  },
  mounted () {
    // console.log(this.equipmentInfo);
    this._getDevTypeList()
    this._findLedger(this.$route.query.id)
  },

  computed: {
    formatterStatus () { // 过滤 报废类型
      return ((id) => {
        for (let i = 0; i < this.scrapTypeList.length; i++) {
          if (this.scrapTypeList[i].value == id) {
            // console.log("name:" + this.equipmentType[i].label)
            return this.scrapTypeList[i].label
          }
        }
      })
    },
    devArrData () { // 设备类型 array
      return jsonToArray(this.treeData)
    },
    // 设备类别
    comEqType () {
      return ((type) => {
        for (let i = 0; i < this.devArrData.length; i++) {
          if (this.devArrData[i].id == type) {
            // console.log("name:" + this.equipmentType[i].label)
            return this.devArrData[i].name
          }
        }
      })
    },
    // ...mapState({
    //   equipmentInfo: state => state.equipmentLedger.equipmentInfo //设备管理点击台账传过来的
    // }),
    //设备状态转换
    equipmentState () {
      return ((state) => {
        let result = ''
        switch (state.isRun) {
          case 0:
            result = '已启用'
            break;
          case 1:
            switch (state.stopCause) {
              case 0:
                result = '保养中'
                break;
              case 1:
                result = '校准中'
                break;
              case 2:
                result = '维修中'
                break;
              case 3:
                result = '已停用'
                break;
              case 4:
                result = '已报废'
                break;
            }
        }
        return result
      })
    },
  },
  methods: {
    // 查 设备类型 接口 pw
    _getDevTypeList() {
      getDevTypeList().then(res => {
        res = res.data
        if (res.code == 200) {
          this.treeData = res.data;
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 查申请单 详情
    _findById(val, type) {
      findById({ id: val }).then(res => {
        res = res.data
        if (res.code == 200) {
          this.checkInfo = res.data;
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 台账 详情
    _findLedger (val) {
      findLedger({ id: val }).then(res => {
        res = res.data
        if (res.code == 200) {
          this.equipmentInfo = res.data.equipment;
          this.equipmentDataInfo = res.data.equipmentDashboardData;
          this.gridData = res.data.projectLists;
          this.maintenanceList = res.data.maintenanceList;
          this.borrowingList = res.data.borrowingList;
          this.scrap = res.data.scrap;
        } else {
          this.$notify.error(res.message)
        }
      })
    },
    //获取设备数据表
    getdeviceDataList(val){
      let that = this;
      let data={
          page:that.deviceOptionPage.currentPage,
          size:that.deviceOptionPage.pageSize,
          equipmentId:val,
      }
      getDevice(data).then(res => {
        if (res.data.code == 200) {
          that.deviceDataList = res.data.data.list;
          that.deviceOptionPage.total = res.data.data.total
          that.deviceOptionPage.currentPage = res.data.data.pageNum
          that.deviceOptionPage.pageSize = res.data.data.pageSize
        } else {
          that.$notify.error(res.data.message)
        }
      })
    },
    // 设备数据分页
    currentPages (val) {
      this.deviceOptionPage.currentPage = val;
      this.getdeviceDataList(this.$route.query.id);
    },
    sizeChanges (val) {
      this.deviceOptionPage.pageSize = val
      this.getdeviceDataList(this.$route.query.id)
    }, 
    // 查看
    pojoMenuBtn (row, index) {
      setStore({ name: 'projectId', content: row.id, type: 'session' })
      this.$router.push({ path: '/ledger/ProjectLedger' });

    },
    // 申请单
    shenqing(row, index){
      this.examineModeType = 1;
      this.examineMode = true;
      this._findById(row.id);

    },
    // 维保单
    weibao(row, index){
      console.log(row)
    },
    // 切换tabs
    aaa(type) {
      if(type.name == 6){
        this.getdeviceDataList(this.$route.query.id);
      }
      console.log(type.name)
    }
  }
}
</script>

<style>

      .btn {
        display: inline-block;
        padding: 2px 10px;
        background: cornflowerblue;
        color: #ffffff;
        border-radius: 2px;
        cursor: pointer;
        flex: none;
        margin-left: 10px;
      }
.margin-bottom-zero {
  margin-bottom: 0px !important;
}
.imgClass {
  max-width: 500px;
  max-height: 220px;
}
.shebieMsg {
  border: 1px solid #dcdfe6;
}
.shebieMsg > div:first-child {
  border-bottom: 1px solid #dcdfe6;
  padding: 20px;
  margin: 0px 0px 20px 0px !important;
}
.el-divider {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 24px 0;
  background-color: #dcdfe6;
  position: relative;
}
.el-row {
  margin-left: 20px !important;
  margin-bottom: 20px;
}
.avue-crud__menu {
  min-height: 0px;
}
.el-col-17 > .el-divider {
  margin: 0;
}
</style>